<template>
	<view class="container">
		<!-- #ifndef H5 -->
		<tui-navigation-bar :isOpacity="false" @init="initNavigation" title="分享ThorUI" color="#fff" transparent>
			<view class="tui-share__back" :style="{ top: top + 'px' }" @tap="back"><tui-icon name="arrowleft" color="#fff"></tui-icon></view>
		</tui-navigation-bar>
		<!-- #endif -->
		<view class="tui-qrcode__box" :style="{ paddingTop: height + 18 + 'px' }"><image class="tui-qrcode__ic" :src="shareImg" mode="widthFix"></image></view>

		<view class="tui-share__box">
			<view class="tui-share__title">更多分享方式</view>
			<view class="tui-share__list">
				<view class="tui-share__item">
					<button open-type="share" @tap="onshare" class="tui-btn__opentype"></button>
					<image class="tui-share__ic" src="https://thorui.cn/extend/share/icon_share_3x.png"></image>
					<text class="tui-share_text">分享给好友</text>
				</view>
				<view class="tui-share__item" @tap="createPoster">
					<image class="tui-share__ic" src="https://thorui.cn/extend/share/icon_poster_3x.png"></image>
					<text class="tui-share_text">生成海报</text>
				</view>
			</view>
		</view>
		<canvas :style="{ width: winWidth + 'px', height: winHeight + 'px' }" canvas-id="posterId" id="posterId" class="tui-poster__canvas"></canvas>
	</view>
</template>

<script>
import thorui from '@/components/common/tui-clipboard/tui-clipboard.js'
import poster from '@/components/common/tui-poster/tui-poster.js'
export default {
	data() {
		return {
			shareImg: 'https://thorui.cn/extend/share/share_img_qrcode.png',
			height: 20,
			top: 12,
			winWidth: 375,
			winHeight: 667,
			posterImg: ''
		};
	},
	onLoad(options) {
		setTimeout(() => {
			let sys = uni.getSystemInfoSync();
			this.winWidth = sys.windowWidth;
			//高度可根据内容固定，也可生成全屏
			this.winHeight = uni.upx2px(324 * 2 + 30 * 2 * 2 + 70 * 2 + 160 * 2); //sys.windowHeight
		}, 66);
	},
	methods: {
		initNavigation(e) {
			this.height = e.height;
			this.top = e.top;
		},
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack();
			} else {
				uni.switchTab({
					url: '/pages/tabbar/index/index'
				});
			}
		},
		onshare(e) {
			//#ifdef APP-PLUS
			plus.share.sendWithSystem(
				{
					content: 'ThorUI组件库',
					href: 'https://thorui.cn/doc/guide.html'
				},
				function() {
					console.log('分享成功');
				},
				function(e) {
					console.log('分享失败：' + JSON.stringify(e));
				}
			);
			//#endif
			// #ifdef H5
			thorui.getClipboardData(
				'https://thorui.cn/doc/guide.html',
				res => {
					if (res) {
						this.tui.toast('链接复制成功，快去分享吧~');
					} else {
						this.tui.toast('链接复制失败');
					}
				},
				e
			);
			// #endif
		},
		async createPoster() {
			if (this.posterImg) {
				uni.previewImage({
					urls: [this.posterImg]
				});
				return;
			}
			uni.showLoading({
				mask: true,
				title: '图片生成中...'
			});
			let mainPic = await poster.getImage(this.shareImg);
			let qrcode = await poster.getImage('https://thorui.cn/extend/share/applets.png');
			// #ifdef MP-WEIXIN
			await poster.removeSavedFile()
			// #endif
			if (mainPic && qrcode) {
				const imgs = {
					mainPic: mainPic,
					qrcode: qrcode
				};
				
				let text = 'ThorUI是包含uni-app和原生小程序双重版本组件库，让开发效率倍速提升!';
				poster.drawPoster('posterId', this.winWidth, this.winHeight, imgs,text ,'ThorUI示例小程序',res => {
					uni.hideLoading();
					if (res) {
						this.posterImg = res;
						uni.previewImage({
							urls: [this.posterImg]
						});
					} else {
						this.tui.toast('生成海报失败,请稍后再试');
					}
				});
			} else {
				uni.hideLoading();
				this.tui.toast('生成海报图片下载失败,请稍后再试');
			}
		}
	},
	onShareAppMessage: function(e) {
		return {
			title: 'ThorUI组件库'
		};
	}
};
</script>

<style>
page,.container {
	height: 100%;
	background: linear-gradient(to right, #ffcb4b, #ffae34);
}

.tui-share__back {
	position: absolute;
	left: 12rpx;
}

.tui-qrcode__box {
	width: 100%;
	display: flex;
	justify-content: center;
}

.tui-qrcode__ic {
	width: 648rpx;
	height: 774rpx;
}

.tui-share__box {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: rgba(255, 255, 255, 0.85);
	font-size: 28rpx;
	padding-bottom: 56rpx;
}

.tui-share__title {
	color: rgba(255, 255, 255, 0.6);
	padding-bottom: 12rpx;
}

.tui-share__list {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-share__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 40rpx 60rpx;
	position: relative;
}

.tui-share__ic {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 12rpx;
	opacity: 0.85;
}

.tui-poster__canvas {
	background-color: #fff;
	position: absolute;
	left: -9999px;
}
</style>
